<template>
  <NestedMenu :menu-items="filterdPageItems" @select="onPageSelected"></NestedMenu>
</template>

<script setup lang="ts">
import usePageMenus from "@/composable/pagemenus";
import NestedMenu from "./NestedMenu.vue";
import { computed } from "vue";

const props = defineProps({
  excludeNames: {
    type: Array,
    default: []
  },
});

const { pageItems, onPageSelected } = usePageMenus();

const filterdPageItems = computed(() => {
  for (let i in pageItems) {
    pageItems[i].children = pageItems[i].children.filter(pic => props.excludeNames.indexOf(pic.title) < 0)
  }
  return pageItems;
})
</script>

<style scoped>
.menu-tree-node,
.menu-tree-leaf {
  color: white;
  display: inline-block;
  height: 4em;
  width: 100%;
}
</style>
